<template>
  <div class="container1">
    <div id="exhart8" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
// import * as echarts from "echarts";
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
import { getCDLYFXByPFMarket, getCDFXByMarketATy } from "../../util/home";

HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      option: {},
    };
  },
  inject: ["currentMarketId"],
  computed: {},
  watch: {},
  mounted() {
    // getCDFXByMarketATy({ marketId: this.currentMarketId() }).then((res) => {
    //   this.getInit(res.data.data);
    // });
  },
  methods: {
    refresh() {
      getCDFXByMarketATy({ marketId: this.currentMarketId() }).then((res) => {
        this.getInit(res.data.data);
      });
    },
    getInit(_data) {
      let data = [];
      _data.forEach((item) => {
        data.push([item.comeaddress, item.num]);
      });
      var chart = Highcharts.chart("exhart8", {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 45,
          },
          backgroundColor: "none",
          marginRight: 200,  // 重点调整项
          spacing: [20, 40, 20, 20],
          marginLeft: -0,
          style: {
            fontFamily: "",
            fontSize: "15px",
            color: "#fff",
          },
        },
        title: {
          text: null,
          style: {
            fontFamily: "",
            fontSize: "15px",
            color: "#fff",
          },
        },
        credits: {
          enabled: false,
        },
        legend: {
          borderRadiusL: "0",
          // layout: 'vertical',
          align: "right",
          verticalAlign: "middle",
          x: 250,
          y: 10,
          width: 400,
          itemWidth: 200,
          itemDistance: 0,
          labelFormatter: function () {
            return `${this.name} ${this.y.toFixed(2)}吨`;
          },
          floating: true,
          backgroundColor: "none",
          shadow: true,
          itemStyle: {
            color: "#fff",
            fontSize: 20,
          },
          symbolRadius: "0",
        },
        plotOptions: {
          pie: {
            innerSize: 150,
            depth: 65,
            showInLegend: true,
            size: "60%",      // 关键调整项
            center: ["10%", "50%"],  // 关键调整项
            dataLabels: {
              enabled: true,
              distance: 20,   // 增大标签间距
              format: "{point.percentage:.2f} %",
              style: {
                color: "#fff",
                fontSize: 20
              },
            },
          },
        },
        series: [
          {
            name: "交易数量",
            data: data,
          },
        ],
      });
    },
  },
};
</script>
<style lang="less" scoped>
.container1 {
  height: 100%;
  display: flex;

  ::v-deep .highcharts-container {
    height: 100% !important;

    .highcharts-root {
      height: 100% !important;

    }
  }
}
</style>
